<template>
    <div class="editForm-wrapper">
        <!-- 客户编辑dialog-->
        <el-dialog
            :title="title"
            :close-on-click-modal="false"
            v-dialogDrag
            :visible.sync="editVisible"
        >
            <el-form
                label-width="125px"
                ref="editForm"
                :model="editForm"
            >
                <!-- oninput="value=value.replace(/[^\d]/g,'')" -->
                <el-form-item label="产品名称:" prop="productName"
                              :rules="[
                  {required: true, message:'请选择产品', trigger:'change'}
                 ]">
                    <el-input class="selectInput" v-model="editForm.productName" @focus="getProductClient"
                              placeholder="请选择产品名称">
<!--                        <template slot="append"><span @click="getProductClient">选择</span></template>-->
                    </el-input>
                </el-form-item>
                <section class="price-range" style="display: flex">
                    <el-form-item label="价格范围:" prop="priceLower"
                                  :rules="[
                  {required: true, message:'请选择价格下限', trigger:'blur'},
                  {validator:onlyNumber, trigger:'blur'}
                 ]">
                        <el-input placeholder="下限" v-thousands.priceLower="editForm" v-model="editForm.priceLower"></el-input>
                    </el-form-item>
                    <span style="padding-top: 8px; padding-left: 12px">-</span>
                    <el-form-item prop="priceUpper" label-width="12px"
                                  :rules="[
                  {required: true, message:'请选择价格上限', trigger:'blur'},
                  {validator:onlyNumber, trigger:'blur'}
                 ]">
                        <el-input placeholder="上限" v-thousands.number="editForm"  v-model="editForm.priceUpper"></el-input>
                    </el-form-item>
                </section>

                <el-form-item label="开始执行时间:" prop="effectTime"
                              :rules="[
                  {required: true, message:'请输入开始执行时间', trigger:'blur'}
                 ]">
                    <el-date-picker
                        v-model="editForm.effectTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期时间"
                        :picker-options="pickerOptionsStart"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束执行时间:" prop="endTime">
                    <el-date-picker
                        v-model="editForm.endTime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期时间"
                        :picker-options="pickerOptionsEnd"
                    >
                    </el-date-picker>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="doSubmit()" v-noMoreClick
        >确定</el-button
        >
        <el-button size="small" @click="close()">取消</el-button>
      </span>
        </el-dialog>
        <ProductDialog ref="ProductDialog" @getProductData="getProductData">

        </ProductDialog>
    </div>
</template>
<script>
    import {edit} from '@/api/market/productPrice.js'
    import ProductDialog from '@/components/dialog/productDialog.vue'

    export default {
        components: {
            ProductDialog
        },
        data() {
            return {
                pickerOptionsStart: {
                    disabledDate: (time) => {
                        if (this.editForm.endTime) {
                            return time.getTime() < Date.now() - 8.64e7 || time.getTime() > new Date(this.editForm.endTime).getTime() - 1 * 24 * 60 * 60 * 1000;
                        }
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
                pickerOptionsEnd: {
                    disabledDate: (time) => {
                        return time.getTime() < Date.now() - 8.64e7 || time.getTime() < new Date(this.editForm.effectTime).getTime() + 1 * 24 * 60 * 60 * 1000;
                    }
                },
                areaLabel: {},
                method: '',
                title: '',
                productPage: {
                    pageSize: 10,
                    pageNo: 1,
                    total: 20
                },
                editForm: {
                    productId: '',
                    productName: '',
                    priceUpper: '',
                    priceLower: '',
                    effectTime: '',
                    endTime: '',
                    id: ''
                },
                editVisible: false,
                detailsVisible: false,
                dataRule: {
                    productName: [{required: true, message: '请选择产品', trigger: 'blur'}],
                    priceLower: [
                        {required: true, message: '请选择价格下限', trigger: 'change'}
                    ],
                    priceUpper: [
                        {required: true, message: '请选择价格上限', trigger: 'blur'}
                    ],
                    effectTime: [
                        {required: true, message: '请输入开始执行时间', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
        	handleClose(done) {
						this.$Msg.confirm({
							title:'您确定要关闭吗？',
							content:this.GLOBAL.FORM_CLOSE_TIPS,
							confirmCall:()=>{
								done();
							}
						})
					},
            onlyNumber(rule, value, callback) {
                if (value && !(/^[1-9]\d*$/).test(value)) {
                    callback(new Error('只能填写正整数'))
                } else {
                    callback()
                }
            },
            init(method, editForm) {
                if (method === 'add') {
                    this.editVisible = true
                    this.$nextTick(() => {
                        this.$refs.editForm.resetFields()
                        // this.editForm = {}
                    })

                    this.editForm.id = ''
                    this.editForm.addressId = ''
                    this.title = '新增价格策略'
                } else if (method === 'edit') {
                    this.editVisible = true
                    this.method = method
                    console.log(editForm.countyCode)
                    this.$nextTick(() => {
                        this.$refs.editForm.resetFields()
                        this.editForm = editForm
                    })

                    this.title = '修改价格策略'
                }
                console.log(this.method)
            },
            // 产品选择弹框
            getProductClient() {
                this.$refs['ProductDialog'].page.pageNo = 1
                this.$refs['ProductDialog'].getProductList(this.productPage);
                this.$refs['ProductDialog'].dialogVisible = true
            },
            // 产品选择弹框数据获取方法
            getProductData(row) {
                this.editForm.productName = row.name
                this.editForm.productId = row.id
                this.dialogVisible = false
                console.log(row)
            },
            close() {
                this.editVisible = false
            },
            doSubmit() {
                this.$refs['editForm'].validate((valid) => {
                    if (valid) {
                        if (this.editForm.priceUpper >= this.editForm.priceLower) {
                            edit(this.editForm).then((res) => {
                                if (res.data.code === '200') {
                                    this.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    })
                                    this.editVisible = false
                                    this.$emit('refreshDataList')
                                }
                            });
                        } else {
                            this.$notify.error({
                                title: '错误',
                                message: '价格上限必须大于等于价格下限'
                            })
                        }

                    }
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    ::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 100%;
    }

    ::v-deep.editForm-wrapper .el-dialog__wrapper .el-dialog__body .el-form .el-form-item {
        .inputAppend-wrapper.el-input.el-input-group {
            .el-input__inner {
                min-width: 282px !important;
            }

            .el-input-group__append {
                left: -1px !important;
            }
        }
    }

    ::v-deep.editForm-wrapper .el-dialog__wrapper .el-dialog {
        .el-form section.price-range .el-form-item {
            .el-input__inner {
                width: 145px !important;
                min-width: inherit !important;
            }
        }
    }
</style>
